<template>
  <div class="naturalGas">
    <div class="firstBox">
      <div class="middleEcharts">
        <middleEchartsVue :echartsData="echartsData"></middleEchartsVue>
      </div>
      <div class="bottom">
      <div class="bottomEcharts1">
        <bottomEcharts1Vue :echartsData="b2Data"></bottomEcharts1Vue>
      </div>
      <div class="bottomEcharts2">
        <bottomEcharts2Vue :echartsData="b3Data"></bottomEcharts2Vue>
      </div>
      <div class="bottomEcharts3">
        <bottomEcharts3Vue :echartsData="b4Data"></bottomEcharts3Vue>
      </div>
      </div>
    </div>
    <div class="secondBox">
      <div class="rightEcharts1">
        <rightEcharts1Vue :echartsData="b5Data"></rightEcharts1Vue>
      </div>
      <div class="rightEcharts2">
        <rightEcharts2Vue :echartsData="b6Data"></rightEcharts2Vue>
      </div>
      <div class="rightEcharts3">
        <rightEcharts3Vue :echartsData="b7Data"></rightEcharts3Vue>
      </div>
    </div>
  </div>
</template>

<script>
// import naturalEcharts from './naturalComponents/naturalEcharts.vue'
import bottomEcharts1Vue from './naturalComponents/bottomEcharts1.vue'
import bottomEcharts2Vue from './naturalComponents/bottomEcharts2.vue'
import bottomEcharts3Vue from './naturalComponents/bottomEcharts3.vue'
import rightEcharts1Vue from './naturalComponents/rightEcharts1.vue'
import rightEcharts2Vue from './naturalComponents/rightEcharts2.vue'
import rightEcharts3Vue from './naturalComponents/rightEcharts3.vue'
import middleEchartsVue from './naturalComponents/middleEcharts.vue'
import { roastData } from '../api/minuteReportApi'
import '@/mock/allData.js'
export default {
  name: 'naturalGas',
  components: {
    // naturalEcharts
    bottomEcharts1Vue,
    bottomEcharts2Vue,
    bottomEcharts3Vue,
    rightEcharts1Vue,
    rightEcharts2Vue,
    rightEcharts3Vue,
    middleEchartsVue
  },
  data () {
    return {
      chartData: {},
      dtuStatus: false,
      windStatus: false,
      echartsData: {},
      b2Data: {},
      b3Data: {},
      b4Data: {},
      b5Data: {},
      b6Data: {},
      b7Data: {},
      ployData: [],
      svgDatas: [],
      oxygenDatas: {},
      typesfourthBoxTable: {
        stripe: false,
        formHead: [],
        tableAllData: []
      },
      thirdBoxTable: [],
      secondTwoBoxTable: {
        icons: 'iconfont icon-shujuyuan',
        titleName: '监测数据',
        stripe: false,
        formHead: [],
        tableCheckData: []
      },
      timer: null,
      websock: null
    }
  },
  created () {
    // this.$socket.createWebSocket('ws://106.52.170.16:8090/getTunnelWSData')
    // // this.$socket.createWebSocket('ws://192.168.117.216:8090/getTunnelWSData')
    // this.$socket.registerCallBack('chartAllData', this.getAllData)
    this.initWebSocket()
  },
  mounted () {
    this.getEchartsData()
  },
  // beforeRouteLeave (to, from, next) {
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  //   next()
  // },
  destroyed () {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    async getEchartsData () {
      const params = {
        typeId: '62874bb27cc89967383a5b80'
      }
      const { data } = await roastData(params)
      // console.log(data, 111)
      this.b2Data = data.data.data[0].info
      this.b3Data = data.data.data[1].info
      this.b4Data = data.data.data[2].info
      this.b5Data = data.data.data[3].info
      this.b6Data = data.data.data[4].info
      this.b7Data = data.data.data[5].info
    },
    initWebSocket () {
      // 初始化weosocket
      // this.websock = new WebSocket('ws://192.168.240.216:8060/getTunnelWSData')
      this.websock = new WebSocket('ws://101.42.233.226:8060/roastWBData/get')
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
    },
    websocketonerror () {
      // 连接建立失败重连
      this.reconnect()
    }, 
    websocketonmessage (e) {
      // console.log('111', JSON.parse(e.data))
      const redata = JSON.parse(e.data)
      this.echartsData = redata
      console.log(this.echartsData,"这是")
    },
    reconnect () {
      // 重连
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.initWebSocket()
      }, 5000)
    }
  }
}
</script>
